<template>
    <div v-loading="loading" element-loading-text="加载中...">
        <el-table :data="treeData" height="450" style="width: 80%;margin-left: auto;margin-right: auto;"
            :table-layout="tableLayout" :row-class-name="tableRowClassName" row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="expand">
                <template #default="props">
                    <el-table :data="props.row.children" style="width: 50%;margin-left: auto;margin-right: auto;"
                        row-key="id">
                        <el-table-column prop="serviceName" label="子服务名称"></el-table-column>
                        <el-table-column prop="image" label="图标">
                            <template #default="scope">
                                <el-image v-if="scope.row.image" :src="scope.row.image" style="width: 100%;height: 92px;"
                                    :preview-src-list="[scope.row.image]" />
                            </template>
                        </el-table-column>
                        <el-table-column label="状态">
                            <template #default="scope">
                                <p v-if="scope.row.state == '0'">已禁用</p>
                                <p v-if="scope.row.state == '1'">已启用</p>
                                <!-- <el-radio-group v-model="row.state" @change="stateChange(row)">
                                    <el-radio :value="0">禁用</el-radio>
                                    <el-radio :value="1">启用</el-radio>
                                </el-radio-group> -->
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template #default="scope">
                                <el-button size="small" type="primary"
                                    @click="handleEditChildren(scope.$index, scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="serviceName" label="服务类别名称" />
            <el-table-column label="状态">
                <template #default="scope">
                    <p v-if="scope.row.state == '0'">已禁用</p>
                    <p v-if="scope.row.state == '1'">已启用</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" @click="handleAddChildren(scope.$index, scope.row)">新增子类别</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
//斑马条
const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 1 ? 'success-row' : ''
}
const tableLayout = ref('auto')
const loading = ref(false)

import { storeToRefs } from "pinia";
import { useServicetypeStore } from "../../../stores/servicetype.js";
const servicetypeStore = useServicetypeStore()
const { treeData } = storeToRefs(servicetypeStore)

onMounted(async () => {
    loading.value = true
    try {
        console.log('开始加载服务类型数据')
        await servicetypeStore.selectAllFather()
        console.log('大类数据加载完成，开始加载子类数据')
        await servicetypeStore.fetchChildrenForParents()
        console.log('所有数据加载完成')
    } catch (error) {
        console.error('加载数据失败:', error)
        ElMessage.error('加载服务类型数据失败: ' + (error.message || '未知错误'))
    } finally {
        loading.value = false
    }
})

const handleEdit = (index, row) => {
    servicetypeStore.pre4EditType(index, row)
}

const handleAddChildren = (index, row) => {
    servicetypeStore.pre4AddChildren(index, row)
}

const handleEditChildren = (index, row) => {
    servicetypeStore.pre4EditChildren(index, row)
}

</script>
<style>
.el-table .success-row {
    --el-table-tr-bg-color: #c6e2ff
}
</style>